<template>
	<view class="container">
		<!-- 头部标题和状态 -->
		<view class="header">
			<view>
				<text class="title">货源详情</text>
			</view>
			<!-- 三点图标，仅图标可点击 -->
			<image src="../../../static/images/sangedian.png" style="width: 30px; height: 30px; margin-right: 20rpx;"
				@click="showDropdown = !showDropdown" />

			<!-- 下拉菜单，只在点击图标后显示 -->
			<view v-if="showDropdown" style="position: absolute; top: 40px; right: 0;
			           background-color: #fff; border: 1px solid #ccc;
			           border-radius: 8rpx; box-shadow: 0 2px 6px rgba(0,0,0,0.2); z-index: 999;">
				<view @click="handleOption('编辑')" style="padding: 20rpx;">编辑</view>
				<view @click="handleOption('关闭')" style="padding: 20rpx;">关闭货源</view>
			</view>
		</view>

		<view class="time-info">
			<view style="margin-left: 20rpx; width: 500rpx; ">{{goodsInfo.publishedtime}}发布</view>
			<view class="status paused" style="width: 100rpx;" v-if="goodsInfo.status==0">待充值</view>
			<view class="status paused" style="width: 100rpx;" v-if="goodsInfo.status==1">进行中</view>
			<view class="status paused" style="width: 100rpx;" v-if="goodsInfo.status==2">已结束</view>
			<view class="status paused" style="width: 100rpx;" v-if="goodsInfo.status==3">已暂停</view>
			<view class="status paused" style="width: 100rpx;" v-if="goodsInfo.status==4">未开始</view>
		</view>

		<view class="card_bottown">
			<view class="card">
				<view class="section-title" style="margin-top: 15rpx;">
					<text class="label">货源ID:</text>
					<text class="value">{{goodsInfo.sourceid}}</text>
					<image src="../../../static/images/copy.png" style="width: 2vh; height: 2.5vh; margin-left: 80rpx;"
						@click="copy"></image>
				</view>
			</view>
			<!-- 基本信息卡片 -->
			<view class="card">
				<view class="info-item">
					<text class="label">装货时间:</text>
					<text class="value">{{goodsInfo.starttime}}</text>
				</view>

				<view class="location-item">
					<text class="location-label"><text class="yuan">装</text>{{goodsInfo.shippingaddress}}</text>
					<!-- <text class="location-address">山西省忻州市保德县冯家川煤矿</text> -->
				</view>

				<view class="location-item">
					<text class="location-label"><text class="yuan1">卸</text>{{goodsInfo.unloadingaddress}}</text>
					<!-- <text class="location-address">山西省太原市关营区新兰路173号</text> -->
				</view>

				<view class="info-item">
					<text class="label">结束时间:</text>
					<text class="value">{{goodsInfo.endtime}}</text>
				</view>
			</view>



			<!-- 专属车队卡片 -->
			<view class="card">
				<view class="section-title">专属车队</view>

				<!-- 当有数据时 -->
				<view v-if="goodsInfo.exclusivefleet && goodsInfo.exclusivefleet.length > 0">
					<view class="fleet-info" v-for="item in goodsInfo.exclusivefleet" :key="item.id">
						<text class="fleet-name">{{ item.team[0].teamName }}</text>
						<text class="fleet-count">{{ item.team[0].teamNumber }}辆车</text>
					</view>
				</view>

				<!-- 没有数据时 -->
				<view v-else class="no-fleet-tip">
					该货源不是专属货源
				</view>

			</view>

			<!-- 货价信息卡片 -->
			<view class="card">
				<view class="section-title">货价信息</view>
				<view class="info-item">
					<text class="label">{{goodsInfo.cargoname}}</text>
					<text class="value">货物余量 {{goodsInfo.totalweights}}吨</text>
				</view>
				<view class="price-item">
					<text class="price">{{goodsInfo.unitprice}}元/吨(含税)</text>
				</view>
			</view>

			<!-- 费用信息卡片 -->
			<view class="card">
				<view class="section-title">费用信息</view>
				<view class="info-item" v-if="peizhidx.driverservicerates=='1'">
					<text class="label">司机服务费率</text>
					<text class="value">{{goodsInfo.driverservicerate}}%</text>
				</view>
				<view class="info-item" v-if="peizhidx.fuelcost==1">
					<text class="label">油费</text>
					<text class="value">{{goodsInfo.fuelcost}}元/车</text>
				</view>
				<view class="info-item" v-if="peizhidx.informationfee==1">
					<text class="label">信息费</text>
					<text class="value">{{goodsInfo.informationfee}}元/车</text>
				</view>
			</view>

			<!-- 底部提示 -->
			<view class="footer-note">
				<text>资源到了结束时间的时候，就变为了已结束状态</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	// 这里可以使用 Vue3 的 composition API
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		http
	} from '../../../config/request';
	import {
		useuser
	} from '../../../stores/user.js';
	const user = useuser();
	// 如果需要从接口获取数据，可以这样写
	const goodsInfo = ref({})
	const showDropdown = ref(false)
	const copy = () => {
		console.log(goodsInfo.value.sourceid)
		console.log('复制按钮被点击')
		 const value = String(goodsInfo.value.sourceid); 
		uni.setClipboardData({
			data: value,
			success: (res) => {
				console.log('复制成功', res);
				uni.showToast({
					title: '已成功复制货源ID',
					icon: 'none',
					duration: 1500 // 设置显示时间
				});
			},
			fail: (err) => {
				console.log('复制失败', err);
				uni.showToast({
					title: '复制失败，请重试',
					icon: 'none',
					duration: 1500
				});
			}
		});
	}

	const guanbi = async () => {
		const res = await http({
			url: '/updates/' + goodsInfo.value.sourceid,
			method: 'get'
		})
		console.log(res)
		if (res.code === 20041) {
			uni.showToast({
				title: '关闭成功',
				icon: 'success',
				duration: 2000,
			});
			qingqiu()
		} else {
			uni.showToast({
				title: '关闭失败',
				icon: 'error',
				duration: 2000,
			});
		}
	}
	const handleOption = (option) => {
		console.log('你选择了：', option);
		showDropdown.value = false;

		if (option === '关闭') {
			if (goodsInfo.value.status != 2) {
				uni.showModal({
					content: '手动关闭货源后，以抢单司机的运单仍可执行，关闭货源后将无法恢复货源，确定继续吗？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户确认关闭');
							guanbi()
						} else if (res.cancel) {
							console.log('用户取消关闭');
						}
					}
				});
			} else {
				uni.showToast({
					title: '该货源已结束',
					icon: 'none',
					duration: 2000,
				});
			}
		}
	};

	const qingqiu = async (sourceid) => {
		const res = await http({
			url: '/selectHuoYuanw/' + sourceid,
			method: 'GET'
		})
		console.log(res)
		goodsInfo.value = res.shuju

	}
	const peizhidx = ref({})
	const peizhi = async () => {
		const res = await http({
			url: '/shipperConfig/select/' + user.user.id,
			method: 'GET',

		});
		console.log('配置信息');
		console.log(res);
		if (res.code === 20041) {
			// 请求成功，处理数据	
			peizhidx.value = res.shuju;

		} else {
			uni.showToast({
				title: '货源配置获取失败',
				icon: 'none',
			});
		}
	}

	onLoad((options) => {
		try {
			console.log('接收到的参数：', options.sourceid);
			qingqiu(options.sourceid)
			peizhi()
			// 在这里处理接收到的参数
		} catch (e) {
			console.error('参数解析失败', e);
		}
	})
</script>

<style lang="scss" scoped>
	.no-fleet-tip {
		font-size: 25rpx;
	}

	.yuan {
		display: inline-block;
		width: 40rpx;
		height: 40rpx;
		background-color: #002fa7;
		border-radius: 50%;
		text-align: center;
		line-height: 40rpx;
		margin-right: 20rpx;
		font-size: 25rpx;
		color: #fff;
	}

	.yuan1 {
		display: inline-block;
		width: 40rpx;
		height: 40rpx;
		background-color: #ff0000;
		border-radius: 50%;
		text-align: center;
		line-height: 40rpx;
		margin-right: 20rpx;
		font-size: 25rpx;
		color: #fff;
	}

	.container {
		width: 100%;
		background: #002fa7;
		min-height: 110vh;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			padding-top: 20rpx;

			.title {
				font-size: 45rpx;
				font-weight: bold;
				color: #ffffff;
				margin-left: 20rpx;
			}

			.status {
				font-size: 28rpx;
				padding: 6rpx 12rpx;
				border-radius: 8rpx;

				&.paused {
					color: #ffffff;
				}

				&.ended {
					background-color: #e0e0e0;
					color: #757575;
				}
			}
		}

		.time-info {
			display: flex;
			font-size: 26rpx;
			color: #ffffff;
			margin-bottom: 30rpx;
			justify-content: space-between;
		}
	}

	.card_bottown {
		height: 100vh;
		background-color: #f2f2f2;
		border-radius: 32rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

		.card {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 24rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		}

		.info-item {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			font-size: 28rpx;

			.label {
				color: #666;
			}

			.value {
				color: #333;
				font-weight: 500;
			}
		}

		.location-item {
			margin-bottom: 20rpx;

			.location-label {
				height: 50rpx;
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
				margin-bottom: 8rpx;
				display: inline-block;
			}

			.location-address {
				font-size: 26rpx;
				color: #666;
			}
		}

		.section-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
			position: relative;
			padding-left: 20rpx;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 8rpx;
				height: 30rpx;
				background-color: #2979ff;
				border-radius: 4rpx;
			}
		}

		.fleet-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
			margin-left: 20rpx;

			.fleet-name {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
			}

			.fleet-count {
				font-size: 26rpx;
				color: #666;
				margin-right: 35rpx;
			}
		}

		.price-item {
			margin-top: 10rpx;

			.price {
				font-size: 32rpx;
				color: #ff5722;
				font-weight: bold;
			}
		}

		.divider {
			height: 20rpx;
			background-color: #f5f5f5;
			margin: 20rpx 0;
		}

		.footer-note {
			font-size: 24rpx;
			color: #999;
			text-align: center;
			margin-top: 30rpx;
			padding: 0 20rpx;
			margin-bottom: 100rpx;
		}
	}
</style>